<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>

</body>
<script type="module">
    // import {
    //     defineAsyncComponent,
    //     render,
    //     h,
    //     KeepAlive,
    //     onMounted
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js'
    import {
        defineAsyncComponent,
        render,
        h,
        KeepAlive,
        onMounted
    } from "./runtime-dom.js"

    //  缓存的是dom，keepalive缓存后，不会重新渲染，而是复用原来的dom
    // 1.组件不会被重新创建，会将上次的结果拿出来返回
    // 2.组件不会被销毁，而是将dom移除
    // 3，内部需要缓存dom

    const A1 = {
        setup() {
            onMounted(() => {
                console.log('A1 mounted')
            })
            return () => {
                return h('div', 'A1')
            }
        }
    }
    const A2 = {
        setup() {
            onMounted(() => {
                console.log('A2 mounted')
            })
            return () => {
                return h('div', 'A2')
            }
        }
    }

    render(h(KeepAlive, {
        max: 0
    }, {
        default: () => h(A1, {
            key: 'A1'
        })

    }), document.getElementById('app'))
    setTimeout(() => {
        render(h(KeepAlive, {
            max: 0
        }, {
            default: () => h(A2, {
                key: 'A2'
            })
        }), document.getElementById('app'))
    }, 1000)
    setTimeout(() => {
        render(h(KeepAlive, {
            max: 0
        }, {
            default: () => h(A1, {
                key: 'A1'
            })
        }), document.getElementById('app'))
    }, 2000)

</script>

</html>